<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 添加viewport meta标签以支持响应式设计 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <!-- 添加CSS样式以支持响应式设计 -->
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #password-input {
            width: 300px;
            height: 40px;
            border-radius: 5px;
            border: none;
            outline: none;
            padding: 0 10px;
            font-size: 16px;
            color: #0d2e64;
            margin-bottom: 20px;
        }

        #redirect-button {
            width: 300px;
            height: 40px;
            border-radius: 5px;
            border: 1px solid #fff;
            outline: none;
            background-color: #0d2e64;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
        }

        .container {
            background-color: #0d2e64;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
    </style>
</head>
<body>
<div class="container">
    <div style="text-align: center;color: #f0f0f0;width: 100%">
        直播：{$data['title']}
    </div>
    <div style="width: 100%;display: flex;justify-content: center;margin-top: 10rem">
        <input {if !$data['password']} style="display: none;" {/if} id="password-input" type="password"
        placeholder="请输入密码">

        <button id="redirect-button"
                {if condition="$data['password']" } style="display: none;" {/if} onclick="goMeet()">
        前往腾讯会议开启直播
        </button>
    </div>

</div>

<script>
    document.getElementById('password-input').addEventListener('blur', function () {
        var password = this.value;
        fetch('', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({id: '{$data["id"]}', password: password})
        })
            .then(function (response) {
                // 使用.json()方法获取响应的内容
                return response.json();
            })
            .then(function (data) {
                // 在这里处理响应的内容
                console.log(data);
                if (data.msg === 'success') {
                    document.getElementById('redirect-button').style.display = 'block';
                    document.getElementById('password-input').style.display = 'none';
                }
            });
    });

    function goMeet() {
        window.location.href = '{$meetinfo["meeting_info_list"][0]["join_url"]}';
    }
</script>
</body>
</html>